<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>报表统计首页</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.7/css/layui.css">
  <style>
    /* 全局样式 */
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* 导航栏样式 */
    .sidebar {
      width: 250px; /* 设置固定宽度 */
      height: 100%; /* 让导航栏铺满屏幕高度 */
      position: fixed; /* 让导航栏固定在屏幕上 */
      top: 0; /* 距离屏幕顶部距离 */
      left: 0; /* 距离屏幕左侧距离 */
      overflow-y: auto; /* 如果导航栏高度大于屏幕高度，允许滚动 */
      background-color: #f0f0f0; /* 添加背景颜色 */
    }

    /* 页面内容样式 */
    .main-content {
      margin-left: 250px; /* 留出导航栏的宽度 */
      padding: 20px;
    }

    /* 在小屏幕下，调整页面布局 */
    @media (max-width: 768px) {
      .sidebar {
        width: 100%; /* 导航栏铺满整个屏幕宽度 */
        position: static; /* 取消固定定位 */
        overflow-y: visible; /* 不允许滚动 */
      }
      .main-content {
        margin-left: 0; /* 取消左边距 */
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<div class="sidebar" th:replace="twoGroup/twoGroup.html"></div>

<!-- 页面内容 -->
<div class="main-content">
  <div class="layui-container">
    <h1 class="layui-header">报表统计首页</h1>
    <div class="layui-row layui-col-space20" id="reportContent"></div>
  </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.9.7/layui.js"></script>
<script>
  $(document).ready(function(){
    var reports = [
      {name: '进货站报表', url: 'tostock_in_report'}, // 修改跳转链接
      {name: '出货站报表', url: 'tostock_out_report'}, // 修改跳转链接
      {name: '内部报表', url: 'tointernal_report'}, // 修改跳转链接
      {name: '收件统计', url: 'toreceipt_statistics'}, // 修改跳转链接
      {name: '派件统计', url: 'todispatch_statistics'} // 修改跳转链接
    ];

    var html = '';
    for(var i = 0; i < reports.length; i++){
      html += '<div class="layui-col-md4">';
      html += '<div class="layui-card">';
      html += '<div class="layui-card-header">' + reports[i].name + '</div>';
      html += '<div class="layui-card-body">';
      html += '<a href="' + reports[i].url + '" class="layui-btn layui-btn-primary layui-btn-sm">查看报表</a>';
      html += '</div></div></div>';
    }
    $('#reportContent').html(html);
  });
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
</html>
